/**
 * sidebar
 * 左侧菜单的样式
 */

// 菜单样式
.i-layout-menu {
  &-side {
    position: static; // 菜单开启后，Dropdown 会被 overflow-y:hidden 隐藏掉，加此不受影响
    height: 100%;

    &:after {
      display: none !important;
    }

    // 菜单滚动条样式
    &.i-scrollbar-hide::-webkit-scrollbar-track {
      background-color: transparent;
    }
    &.i-scrollbar-hide::-webkit-scrollbar {
      width: 0px;
    }
    &.i-scrollbar-hide::-webkit-scrollbar-track {
      border-radius: 3px;
    }
    &.i-scrollbar-hide::-webkit-scrollbar-thumb {
      background: hsla(0, 0%, 100%, 0.2);
      border-radius: 3px;
    }

    // 菜单样式
    .i-layout-menu-side-submenu {
      display: block;
      overflow: hidden;
      white-space: nowrap;
      // 子菜单
      .ivu-menu-item {
        height: 49px;
        overflow: hidden;
        display: flex;
        align-items: center;
      }
      // 标题
      .i-layout-menu-side-submenu-title {
        &-with-subtitle {
          position: relative;
        }
      }
      // 副标题
      .i-layout-menu-side-submenu-subtitle {
        display: block;
        font-style: normal;
        font-size: 12px;
        opacity: 0.5;
      }
    }

    // 菜单的图标样式
    .svg-icon {
      margin-right: 6px;
      transition: color 0.2s;
    }
    .sub-ivu-icon {
      margin-right: 6px;
      transition: color 0.2s;
    }
    .ivu-menu-submenu-title-icon {
      right: 8px;
    }

    // 菜单徽标样式
    &-badge {
      position: absolute;
      top: 16px;
      right: 40px;
      .ivu-badge-count {
        box-shadow: none;
      }
    }

    // 非折叠-暗色主题
    &.ivu-menu-dark {
      background: @base-dark-bg;
      // 只有一级菜单
      & .ivu-menu-item {
        transition: color 0.2s ease-in-out;
        background-color: @base-dark-bg !important;

        &:hover {
          background-color: none;
          color: none;
        }
        &.ivu-menu-item-active.ivu-menu-item-selected {
          color: @base-dark-active-bg;
          background-color: transparent;
        }
      }

      // 多级菜单
      & .ivu-menu-submenu {
        transition: color 0.2s ease-in-out;
        &-title {
          background-color: @base-dark-bg !important;
        }
        & .ivu-menu-item {
          &:hover {
            background-color: @base-dark-bg !important;
          }
          &.ivu-menu-item-active.ivu-menu-item-selected {
            background-color: @base-dark-active-bg !important;
            color: #fff;
          }
        }
      }
    }

    // 非折叠-亮色主题
    &.ivu-menu-light {
      // 只有一级菜单
      & .ivu-menu-item {
        &:hover {
          color: @base-light-active-text;
        }
        &.ivu-menu-item-active.ivu-menu-item-selected {
          color: @base-light-active-text;
          background-color: transparent;
          &::after {
            background: @base-light-active-text;
          }
        }
      }

      // 多级菜单
      & .ivu-menu-submenu {
        .ivu-menu-submenu-title {
          &:hover {
            color: @base-light-active-text;
          }
        }
        & .ivu-menu-item {
          &.ivu-menu-item-active.ivu-menu-item-selected {
            background-color: @base-light-active-bg !important;
          }
        }
      }

      .i-layout-menu-side-collapse-top-level-item-selected {
        color: @base-light-active-text;
        background: @base-light-active-bg;
        z-index: 2;
        position: relative;
        &::after {
          content: "";
          display: block;
          width: 2px;
          position: absolute;
          top: 0;
          bottom: 0;
          right: 0;
          background: @base-light-active-text;
        }
      }
      .ivu-dropdown-show-parent {
        &:hover {
          background-color: transparent;
        }
      }
      .ivu-dropdown-item.ivu-menu-item-active::after {
        width: 0px;
      }
    }

    // 菜单折叠
    &-collapse {
      position: static;

      // 左侧第一层图标外层样式
      &-top-level {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        text-align: center;
        .ivu-menu-item {
          width: 64px;
        }
      }

      // 展开多级下拉菜单样式
      .ivu-select-dropdown {
        margin: 5px 0 5px 3px;
        min-width: 140px;
        text-align: left;
        // 多级菜单项的样式
        .ivu-dropdown-item {
          display: flex;
          align-items: center;
          max-height: 38px;
          overflow: hidden;
          // 包含下级菜单的图标箭头样式
          &-arrow {
            position: absolute;
            top: 0;
            right: 16px;
            bottom: 0;
            left: auto;
            width: 14px;
            height: 14px;
            margin: auto;
          }
          // 父级title的样式
          &.ivu-dropdown-show-parent {
            cursor: default;
            color: #808695;
            &:hover {
              color: #808695;
            }
          }
        }
      }

      // 暗黑主题
      &-dark {
        // 第一层菜单
        .i-layout-menu-side-collapse-top-level-item {
          transition: background 0.2s, color 0.2s;
          &:hover {
            background-color: transparent !important;
            color: #fff;
          }
          &-selected {
            color: @base-dark-active-bg !important;
          }
        }
        // 多层菜单
        .ivu-select-dropdown {
          background-color: @base-dark-bg !important;
          // 暗色背景下多级菜单文字的样式
          .ivu-dropdown-item {
            color: rgba(255, 255, 255, 0.7);
            transition: all 0.2s ease-in-out;
            // 当前被选中的样式
            &.ivu-menu-item-selected.ivu-menu-item-active {
              background-color: @base-dark-active-bg !important;
              color: #fff;
            }
            &:hover {
              background-color: transparent;
              color: #fff;
            }
          }
        }
      }

      // 亮色主题
      &-light {
        // 多级菜单样式
        .ivu-select-dropdown {
          .ivu-dropdown-item {
            &.ivu-menu-item-selected.ivu-menu-item-active {
              color: @base-light-active-text;
            }
          }
        }
      }
    }
  }
}

// mobile，tablet和desktop端，左侧菜单在固定时-包含logo的样式
.i-layout-sider-fix,
.i-layout-drawer-sider-fix {
  .i-layout-menu-side {
    height: 100vh;
    overflow-y: auto;
    &-has-logo {
      height: calc(100vh - 60px);
    }
  }
}
